快結束了，再接再厲，準備考試跟繼續鐵人戰有點累，但希望可以趁年底撐過去！

1. Video Speed Controller UI

• 慢慢掌握到了一些東西，但都是看著做，時間好像不夠自己實際發想，可能所有的債等寒假再來一次。
• toFixed()
• 記得很多東西要自己加單位, ex: px, % ,em 等等

  const speed = document.querySelector('.speed')
  const speedBar = speed.querySelector('.speed-bar')
  const video = document.querySelector('.flex')

  function control(e) {
    const Y = e.pageY - this.offsetTop
    const percent = Y / this.offsetHeight
    const min = 0.4 , max = 4.0
    const height = Math.round((percent)* 100) + '%'
    const rate = percent * (max - min) + min

    speedBar.style.height = height
    speedBar.textContent = rate.toFixed(2)+ "x"
    video.playbackRate = rate
  }
  speed.addEventListener('mousemove',control)
  speed.addEventListener('click',control)

2. Countdown Clock

• document.title 就是分頁的標題
• 時間相關使用和debug 中間使用clearInterval 目的有兩個：
  • 先除掉其他timer
  • 不要讓他變成負

let countdown  //之後才方便clearInterval
const timeDisplay = document.querySelector('.display__time-left')
const endTime = document.querySelector('.display__end-time')
const buttons = document.querySelectorAll('[data-time]')

function timer(seconds){
  //要先除掉其他的timer!!!
  clearInterval(countdown)
  const now = Date.now()
  const then = now + seconds * 1000
  displayTimeLeft(seconds)
  displayEndTime(then)

  countdown = setInterval(() => {
    const secondLeft = Math.round((then - Date.now())/1000)
      if (secondLeft < 0 ){
        clearInterval(countdown)
        return
      }
      displayTimeLeft(secondLeft);
  },1000)
}

function displayTimeLeft(seconds){
  const mins =  Math.floor(seconds/ 60)
  const remainseconds = seconds % 60
  const display = `${mins}:${remainseconds < 10? '0':''}${remainseconds}`
  timeDisplay.textContent = display
  document.title = display
}

function displayEndTime(timestamp){
  const end = new Date(timestamp)
  const hours = end.getHours()
  const mins = end.getMinutes()
  endTime.textContent = `Be back at ${hours}:${mins < 10? '0':''}${mins}`
}

function startTimer(){
  const seconds = parseInt(this.dataset.time)
  timer(seconds)
}

buttons.forEach(button => button.addEventListener('click', startTimer))
document.customForm.addEventListener('submit', function(e){
  e.preventDefault()
  const mins = this.minutes.value
  timer(mins * 60)
  this.reset
})